<template>
  <div class="index-item">
    <div class="index-item-two" @click="activeItemChange(props.item)" :class="[props.item?.isShow?'active':'',props.num==1?'index-item-one':'',props.item.yoyMom == '环比'?'':'huanbi-none-item']">
      <div class="top">
        <div class="name"><p class="ellipsis-2">{{props.item.quotaName}}</p></div>
        <p class="count">
          <span class="num" :class="{ 'red': props.item.threshold }">{{props.item.value}}</span>
          <span>{{props.item.unit}}</span>
        </p>
      </div>
      <div class="bottom">
        <div class="flex items-center" v-if="props.item.yoyMom == '环比'">
          <!-- <img class="img" v-if="props.item.threshold" src="/src/assets/keyIndicator/error.png" /> -->
          <div>环比</div>
          <template v-if="props.item.increaseNum !== null && props.item.increaseNum !== 0">
            <div class="num" :class="{ 'red': props.item.threshold }" style="margin-right: 0">
              {{ props.item.increaseNum }}
            </div>
            <div class="icon-huan-up" v-if="props.item.increaseNum > 0"></div>
            <div class="icon-huan-down" style="border-top: none" v-else-if="props.item.increaseNum < 0"></div>
            <div class="rate" :class="{ 'red': props.item.threshold }">{{ Math.abs(props.item.increaseSpeed) }}%</div>
          </template>
          <div class="name" style="white-space: nowrap" v-else>--</div>
        </div>
        <span class="more" :class="props.item.isShow?'up':'down'"></span>
      </div>
      <div class="time" v-if="item.dataUpdateFrequency&&item.datetime">
        {{ itemTime(item) }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import useQuotaItem from '@/components/QuotaItem/useQuotaItem'
defineOptions({
  name: 'IndexItem'
})

const props = defineProps({
  item: {
    type: Object,
    default: {}
  },
  num:  {  //每行一个或每行两个
    type: Number,
    default: 2
  },
})

const emit = defineEmits(["activeItemChange"])

const activeItemChange = async (item: any) =>{
  emit("activeItemChange",item,item.quotaId)
}


const itemTime = (item: any) => {
  if(item)
    return useQuotaItem(item).timestr.value
  else
    return ''
}

</script>

<style lang="less" scoped>
.index-item{
  .index-item-two{
    background: rgba(0, 102, 255,0.05);
    width: 145px;
    // min-height: 83px;
    min-height: 111px;
    position: relative;
    padding: 0 8px;
    border-radius: 5px;
    transition: all 0.3s;
    &.active{
      background: rgba(0, 102, 255, 0.15);
    }
    .top{
      color: #212121;
      font-size: 14px;
      text-align: center;
      padding: 15px 2px 6px;
      .name{
        height: 32px;
        line-height: 16px;
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .count{
        color: #666666;
        font-size: 11px;
        .num{
          color: #1F2733;
          font-family: DINPro;
          font-weight: bold;
          font-size: 18px;
          padding-right: 2px;
        }
      }
    }
    .bottom{
      border-top: 2px dashed rgba(61, 118, 204, 0.2);
      height: 33px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #666666;
      font-size: 10px;
      padding: 0 23px 0 3px;

      .num,.rate{
        color: #1F2733;
        font-size: 15px;
        font-family: Arial;
        margin: 0 3px;
      }
      .rate{
        color: #272B33;
      }
      .more{
        width: 20px;
        min-width: 20px;
        height: 20px;
        background: url('@/assets/icon/drop-down.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 10px;
        bottom: 9px;
        &.up {
          background: url('@/assets/icon/retract.png') no-repeat;
          background-size: 100% 100%;
        }
      }
      .img{
        width:16px;
      }
    }
    .time{
      background: #3D76CC;
      color: #FFFFFF;
      font-size: 11px;
      position: absolute;
      top: -5px;
      right: 0;
      line-height: 16px;
      padding: 0 6px;
      border-radius: 4px 4px 0 4px;
    }
    &.huanbi-none-item{
      .bottom{
        // border-top: 0;
        // height: 0;
      }
    }
  }
  .index-item-one {
    width: 315px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    .top{
      display: flex;
      align-items: center;
      padding: 0;
      .name{
        margin: 0 8px 0 0;
      }
    }
    .bottom{
      border-top: 0;
    }
  }
  .red {
    color: red !important;;
  }
}
</style>
